<template>
    <el-affix :offset="0">
    <CommonHeader :condition="conditions" />
  </el-affix>
  <div style="min-height: 100vh;">
  <header class="top top-box none">
      <div style="font-size: 20px; font-weight: bold; order: 1">留言板</div>

      <div class="top-box-right">
        <div class="button">好友</div>

        <div class="button">消息</div>

        <ElButton @click="dialogVisible=true">投稿</ElButton>
      </div>
    </header>
    <!-- 内容 -->
    <main class="main">
      <div class="card">
        <div class="card-box" v-for="d in list">
          <div>
            <div class="title">
              <ElAvatar class="none" :src="d.userInfo.tbUserInfo.img"></ElAvatar>
              <div>
                <div style="font-size: 16px">{{ d.userInfo.tbUserInfo.nickname }}</div>
                <div style="font-size: 10px; margin-top: 5px">{{ Tools.formatDate(d.lastupdate) }}</div>
              </div>
            </div>
          </div>
          <div>
            <div class="info none" @click="showDetail(d.mid)">
              <span>
                {{ d.title }}
              </span>
            </div>
            <!-- <hr style="border-top: 1px solid rgb(228, 231, 237)" /> -->
            <div class="footer none">
              <div class="button" @click="messlikeAdd(d.mid)">{{ d.praise }}点赞量</div>
              <div class="button">{{ d.hist }}点击量</div>
              <div class="button">{{ d.reply }}评论</div>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: center; padding: 1rem">
          <PageComp :page="page" @page-change="query"></PageComp>
        </div>
      </div>
    </main>
    <!-- 底部 -->
    <footer></footer>
  </div>
 <!-- 发帖的表单对话框 -->
 <div>
    <ElDialog title="发帖" v-model="dialogVisible" top="4%">
      <div>
        <ElForm>
          <ElFormItem>
            <ElInput v-model="addinfo.title" placeholder="请输入标题" />
          </ElFormItem>
          <ElFormItem>
            <!-- 富文本框区域开始 -->
            <div style="border: 1px solid #ccc">
              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
              <Editor style="height: 500px; overflow-y: hidden" v-model="addinfo.info" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
            </div>
            <!-- 富文本框区域结束 -->
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" @click="showAdd">发布</ElButton>
            <ElButton type="danger" @click="dialogVisible = false">关闭</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </ElDialog>
  </div>
</template>

<script lang="ts" setup>
import { ElAvatar,ElAffix,ElButton,ElDialog,ElForm,ElFormItem ,ElLoading,ElInput,ElMessageBox} from 'element-plus'
import { L12030 } from '../../api/L12030'
import { Tools } from '../../ts/Tools'
import { useRouter } from 'vue-router'
import PageComp from '../../components/PageComp.vue'
import CommonHeader from '../../components/CommonHeader.vue'
import { ref } from 'vue'
const conditions=ref("前端")
const dialogVisible=ref(false) 
  
//#region 富文本框的部分
import { shallowRef, onBeforeUnmount } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const addinfo = ref({
  title: '',
  info: '<p></p>',
})
const editorRef = shallowRef()

// 内容 HTML
// const valueHtml = ref('<p></p>')

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

function showAdd(){
  
  L12030.post('/message',addinfo.value,(data:any)=>{
    const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
    if(data.success){
      loading.close()
      location.reload();
      // dialogVisible=false;
    }else{
      ElMessageBox.alert(data.message)
    }
  })
}

//#endregion

//#region 点赞操作
// 帖子点赞
function messlikeAdd(mid:any){
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.post(`/message/${mid}`,{},(data:any)=>{
    if(data.success){
      loading.close()
      location.reload();
    }else{
      ElMessageBox.alert(data.message);
    }
  })
}

//#endregion

// #region 留言板信息
const list = ref([])


const page = ref({
  pageNumber: 1,
  pageSize: 10,
})

const queryInfo = ref({
  info: '',
  orderBy: 1,
})

const router = useRouter()

function showDetail(mid: any) {
  router.push(`/user/messagedetail/${mid}`)
}

function query() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.get('/message', Tools.concatJson(page.value, queryInfo.value), (data: any) => {
    if (data.success) {
      loading.close()
      console.log(data.data)
      list.value = data.data
      page.value = data.page
    }
  })
}

query()
// #endregion
</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  width: 94%;
}
.top-box {
  display: flex; //flex布局
  align-items: center; //垂直居中（水平对齐）
  justify-content: space-between;
  padding: 10px 50px 10px 50px; //内边距（上右下左）
  box-shadow: 0px 1px 0px rgb(225, 227, 225); //底部阴影线（水平位置 垂直位置 模糊距离 阴影颜色）
  background-color: rgb(255, 255, 255); //背景颜色
}
.top-box-right {
  display: flex;
  align-items: center; //垂直居中（水平对齐）
  gap: 8px 25px; //行间距
  order: 2;
}
.none {
  //元素不可被选中
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.button {
  cursor: pointer; //鼠标悬停样式（手指）
  transition: color 0.3s; //颜色转换时间
  &:hover {
    color: #4ca9ff; //鼠标悬停时字体颜色
  }
}
.card {
  border-radius: 5px; // 圆角
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); // 卡片阴影
  background-color: #fff; // 卡片背景色
  margin: 0px; // 卡片外边距
  padding: 20px; // 卡片内边距
  overflow: hidden; // 溢出隐藏
  opacity: 0.7; 
  .card-box {
    margin: 0px; // 卡片外边距
    padding: 20px; // 卡片内边距
  }
  .card-box:not(:last-child) {
    border-bottom: 1px solid #dcdcdc;
  }
}
.main {
  width: 50%;
  margin: 0px auto;
  padding-top: 4rem;
}
.title {
  display: flex;
  align-items: flex-start;
}
.info {
  display: inline-block;
  padding: 1rem 0px;
  cursor: pointer;
  transition: color 0.3s; //颜色转换时间
  &:hover {
    color: #1890ff;
  }
}

.footer {
  display: flex;
  font-size: 12px;
  gap: 8px 15px; //行间距
  align-items: center; //垂直居中
  justify-content: flex-end;
}
</style>
